<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width:428px;
            height: 345px;
            border: 1px solid #ccc;
            padding: 20px;
            margin: 200px auto;
        }
        .box h3{
            margin: 30px 0 17px 0;
            height: 20px;
            border-left:4px solid red;
            padding-left: 20px;
            line-height: 20px;
        }
        .box .box1{
            width: 212px;
            height: 239px;
            background: #f39900;
            float: left;
        }
        .box .box2{
            float: left;
        }
        .box3{
            overflow:hidden;
        }
        .box .box2 .box3 span{
            width:105.5px;
            height: 138px;
            background: #3a432a;
            float: left;
            text-align: center;
            line-height: 138px;
            margin-left: 2px;
        }
        .box .box2 .box4 ul{
            width: 216px;
            height: 97px;
            list-style-type: none;
        }
        .box .box2 .box4 ul li{
            width: 105.5px;
            height: 48.5px;
            border: 1px dashed #c0c0c0;
            text-align: center;
            line-height: 48.5px;
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <h3>淘宝女装</h3>
    <div class="box1"></div>
    <div class="box2">
        <div class="box3">
            <span>第一张</span>
            <span>第二张</span>
        </div>
        <div class="box4">
            <ul>
                <li>新品上市</li>
                <li>女装</li>
                <li>欧美风</li>
                <li>美搭</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
